<template>
  <view class="my-position">
    <!-- 标题 -->
    <view class="title">我的职务</view>

    <!-- 提示信息 -->
    <view class="tip">
      填写职务名称，让牛人更了解你的身份
    </view>

    <!-- 职务输入 -->
    <view class="input-section">
      <input class="position-input" type="text" v-model="position" placeholder="请输入职务名称" />
	  <!-- 字符数统计 -->
	  <view class="char-count">
	    <text>{{ position.length }}/12</text>
	  </view>
	</view>

    <!-- 修改次数提示 -->
    <view class="modify-tip">
      <text>每月可修改5次，本月您还有5次修改机会</text>
    </view>

   

    <!-- 保存按钮 -->
    <view class="save-button" @click="savePosition">
      <text>保存</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      position: "", // 职务名称
    };
  },
  methods: {
    // 保存职务
    savePosition() {
      if (!this.position) {
        uni.showToast({
          title: "请输入职务名称",
          icon: "none",
        });
        return;
      }

      if (this.position.length > 12) {
        uni.showToast({
          title: "职务名称不能超过12个字符",
          icon: "none",
        });
        return;
      }

      // 模拟保存成功
      uni.showToast({
        title: "保存成功",
        icon: "success",
      });

      // 这里可以添加保存逻辑，例如调用 API 保存职务名称
    },
  },
};
</script>

<style scoped>
.my-position {
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.tip {
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}

.input-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #ebebeb;
}

.position-input {
  width: 100%;
  height: 40px;
  font-size: 16px;
  color: #333;
}

.modify-tip {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.char-count {
  font-size: 14px;
  color: #999;
  margin: auto 0;
}

.save-button {
  width: 90px;
  height: 35px;
  line-height: 35px;
  border: 1px solid #2F318B;
  border-radius: 32px;
  text-align: center;
  cursor: pointer;
  margin-left: auto;
}

.save-button text {
  font-size: 16px;
  color: #2F318B;
}
</style>